Fix: Add id and htmlFor attributes to stream create form fields for accessibility#971
Conversation
…ccessibility - Add id='recipient' and htmlFor='recipient' to Recipient Address field - Add id='create-stream-token' and htmlFor='create-stream-token' to Token select - Add id='create-stream-amount' and htmlFor='create-stream-amount' to Total Amount field - Add id='create-stream-duration' and htmlFor='create-stream-duration' to Duration field Fixes LabsCrypt#631
|
@ogazboiz Should i go ahead with the fixes or just leave them for now? |
|
heads up: main's ci was broken (the Backend CI and Backend Docker Image CI jobs) until the fixes in #969 and #974 just landed, so the red backend/docker checks on this pr are almost certainly stale, they ran against the broken main. please rebase to re-test against the now-green main: |
|
@ogazboiz kindly review |
ogazboiz
left a comment
ogazboiz
left a comment
There was a problem hiding this comment.
clean a11y fix, each label now gets an htmlFor matching an id on its input (recipient/token/amount/duration), so screen readers associate them correctly. merging.
2 participants
Fixes #631 - Add accessibility attributes to stream create form fields
Changes
Added id="recipient" and htmlFor="recipient" to Recipient Address field
Added id="create-stream-token" and htmlFor="create-stream-token" to Token select
Added id="create-stream-amount" and htmlFor="create-stream-amount" to Total Amount field
Added id="create-stream-duration" and htmlFor="create-stream-duration" to Duration field
Why this matters The form labels in page.tsx were not properly associated with their form controls. Screen readers could not pair the labels with inputs/selects, making the form inaccessible to users relying on assistive technology.
Impact
No visual changes
Improves accessibility for screen reader users
Aligns with the modal Wizard which already has proper htmlFor attributes